<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta http-equiv="x-UA-Compatible" content="ie=Edge">
   	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Crafty - 使用实体</title>
	<link rel="shortcut icon" href="../favicon.ico">
	<link type="text/css" rel="stylesheet" href="../craftyjs-site.css" />
</head>
<body>
	<div id = "header-background"> </div>
	<div id = "page-frame">
	<div id="header">
		<nav class="navbar">
  			<div class="container-fluid">
  				<div class="navbar-header">
  					<a class="navbar-brand" href="../"> <img class="logo" src="../images/text-logo.png" /> </a>
  					
				</div>
				<div class="collapse navbar-collapse navbar-right" id="bs-example-navbar-collapse-1">
					<ul class="nav navbar-nav">
						<li><a href="../">首页</a></li>
						<li><a href="../getting-started/">快速开始</a></li>
						<li><a href="../documentation/">文档</a></li>
						<li><a href="../api/">API</a></li>
						<li><a href="../components/">组件</a></li>
						<li class="emph"><a href="../#install">下载</a></li>
					</ul>
				</div>
			</div>
		</nav>
	</div>


	<div id="main">
		<div id="content" class="container">
			
<div id="docs">
	<div id='doc-nav'>
		<ul id='doc-level-one'>
			<li>
				Topics
				<ul>
					<li>
						<a href='../documentation/'>
							文档
						</a>
					</li>
					<li>
						<a href='../documentation/entities.html'>
							实体
						</a>
					</li>
					<li>
						<a href='../documentation/events.html'>
							事件
						</a>
					</li>
					<li>
						<a href='../documentation/components.html'>
							组件
						</a>
					</li>
					<li>
						<a href='../documentation/2d.html'>
							2D绘图
						</a>
					</li>
					<li>
						<a href='../documentation/text.html'>
							文本
						</a>
					</li>
					<li>
						<a href='../documentation/keyboard.html'>
							键盘
						</a>
					</li>
					<li>
						<a href='../documentation/mouse.html'>
							鼠标
						</a>
					</li>
					<li>
						<a href='../documentation/sound.html'>
							声音
						</a>
					</li>
					<li>
						<a href='../documentation/sprites.html'>
							精灵
						</a>
					</li>
					<li>
						<a href='../documentation/scenes.html'>
							场景
						</a>
					</li>
					<li>
						<a href='../documentation/gameloop.html'>
							游戏循环
						</a>
					</li>
				</ul>
			</li>
		</ul>
	</div>
	<div id='doc-content' class="markdown">
		

		<h2> 关于实体 </h2>
<p>实体是你游戏中的一些 <em>事物</em> 。如果这听起来很模糊，那是因为实际上任何东西都可能是一个实体 —— 玩家，敌人，投射物，高分计数器，或者菜单项。 </p>
<p>实体使用组件创建，你可以把它们看做一组功能。Crafty 内置了一些组件，你也可以使用 <a href="../api/Crafty-c.html"><code>Crafty.c()</code></a> 自定义组件。</p>
<h2 id="creating-entities">创建实体</h2>
<p>你使用 <a href="../api/Craft-e.html"><code>Crafty.e()</code></a> 创建实体。大多数情况下你需要传递一个用于初始化的组件列表:</p>
<pre><code><span class="hljs-keyword">var</span> square = Crafty.e(<span class="hljs-string">"2D, Canvas, Color"</span>);</code></pre>
<p>通常，您需要编写更多的代码来实际处理实体，但以上就是创建它所需的全部代码。事实上，您甚至不需要将实体分配给变量，只需调用 <code>Crafty.e</code> 就足够了，以后我们将学习如何在没有直接引用的情况下操作实体。</p>
<h2 id="core-properties-and-methods">核心属性和方法</h2>
<p>每个实体共享某些属性和方法，即使没有添加任何组件。你可以在文档 <a href="../api/Crafty Core.html">Crafty Core</a> 找到相关说明。</p>
<h3 id="component-methods">组件方法</h3>
<p>你可以在实体创建之后 <a href="../api/Crafty Core.html#-addComponent">添加</a> 和 <a href="../api/Crafty%20Core.html#-removeComponent">移除</a> 组件，因此之前的代码可以这样写：</p>
<pre><code><span class="hljs-keyword">var</span> square = Crafty.e(<span class="hljs-string">"2D, Canvas"</span>);
square.addComponent(<span class="hljs-string">"Color"</span>);</code></pre>
<p>如果你不希望我们的组件显示为彩色方块，你可以在稍后移除它:</p>
<pre><code>square.removeComponent(<span class="hljs-string">"Color"</span>, <span class="hljs-literal">false</span>)</code></pre>
<p>我们传递 <code>false</code> 给 <code>removeComponent()</code> 方法，因为我们想移除与组件相关的所有属性和方法。</p>
<p>检查一个实体是否有特定的组件，你可以使用 <code>has()</code> 方法。例如，我们想检查实体是否有 "Explode" 组件：</p>
<pre><code><span class="hljs-keyword">if</span> (e.has(<span class="hljs-string">"Explode"</span>))
    e.explode();</code></pre>
<h3 id="setting-properties">设置属性</h3>
<p>一个组件，例如  <a href="../api/2D.html">2D</a> 可能与实体的某些属性交互。你可以直接设置，或者使用 <code>attr</code> 简写法一次性设置。像这样：</p>
<pre><code>square.x = 5;
square.y = 10;</code></pre>
<p>相当于</p>
<pre><code>square.attr({x:5, y:10})</code></pre>
<h3 id="events">事件</h3>
<p>Crafty 使用全局事件和本地事件来在实体和组件之间进行通信。创建一个事件侦听器，您可以使用 <code>.bind()</code> 方法。让我们来使之前的方块在事件处理中切换颜色。</p>
<pre><code><span class="hljs-comment">// Bind a function to the event</span>
square.bind(<span class="hljs-string">"ChangeColor"</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">eventData</span>)</span>{
        <span class="hljs-comment">// `this` refers to the entity</span>
        <span class="hljs-keyword">this</span>.color(eventData.color);
    })
<span class="hljs-comment">// Trigger that event directly on the entity</span>
square.trigger(<span class="hljs-string">"ChangeColor"</span>, {<span class="hljs-attr">color</span>:<span class="hljs-string">"blue"</span>});</code></pre>
<p>在上面的代码中，我们直接在实体上触发了事件。你也可以在全局触发一个事件，这意味着所有实体都会收到它。事件通常用于组件之间的通信——您可以在组件的文档中找到有关此类事件的信息。</p>
<p>如果一个方法只触发一次，你可以使用 <code>one()</code> 方法替换 <code>bind()</code> 进行事件绑定。移除事件，使用 <code>unbind()</code> 。</p>
<p>关于事件系统的更多讨论可以查看 <a href="../documentation/events.html">事件</a> 章节。</p>
<h3 id="destruction">销毁</h3>
<p>调用实体的 <code>destroy()</code> 方法可以销毁它。</p>
<h2 id="selecting-entities">选择实体</h2>
<p>当一个实体被创建后，它将获得一个唯一的ID。调用 <code>getId()</code> 方法可以获取这个ID。</p>
<p>如果你知道实体的ID，你可以像这样获取它的引用:</p>
<pre><code><span class="hljs-keyword">var</span> secondEntity = Crafty(<span class="hljs-number">2</span>);</code></pre>
<p><a href="../api/Crafty.html"><code>Crafty</code></a> 即是一个对象也是一个方法。这和 jQuery 的工作机制很像。你可以基于实体拥有的组件一次性选择多个：</p>
<pre><code><span class="hljs-comment">// Select all entities with the 2D components</span>
Crafty(<span class="hljs-string">"2D"</span>);
<span class="hljs-comment">// select all entities with both 2D and DOM</span>
Crafty(<span class="hljs-string">"2D DOM"</span>);
<span class="hljs-comment">// select entities with either DOM or Canvas</span>
Crafty(<span class="hljs-string">"DOM, Canvas"</span>);
<span class="hljs-comment">// Select all entities</span>
Crafty(<span class="hljs-string">"*"</span>);</code></pre>
<p>你选择了它们之后，可以直接调用事件相关的方法:</p>
<pre><code><span class="hljs-comment">// Bind a function to *every* entity with the Keyboard component</span>
Crafty(<span class="hljs-string">"Keyboard"</span>).bind(<span class="hljs-string">"KeyDown"</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
    <span class="hljs-comment">// Do something on keydown</span>
});

<span class="hljs-comment">// Explode all the things!</span>
Crafty(<span class="hljs-string">"*"</span>).trigger(<span class="hljs-string">"Explode"</span>);</code></pre>
<p>你也可以在每个实体对象上执行方法:</p>
<pre><code><span class="hljs-comment">// Move every 2D entity 5 pixels to the right</span>
Crafty(<span class="hljs-string">"2D"</span>).each(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
    <span class="hljs-keyword">this</span>.x += <span class="hljs-number">5</span>;
});</code></pre>
<p>如果你想知道选择了几个实体，可以检查 <code>length</code> 属性。</p>
<p>你可以调用 <code>get()</code> 获取一个包含所有实体的数组，或者指定位置的某一个实体：</p>
<pre><code><span class="hljs-comment">// Get the first Canvas entity</span>
<span class="hljs-keyword">var</span> first_entity = Crafty(<span class="hljs-string">"Canvas"</span>).get(<span class="hljs-number">0</span>);
<span class="hljs-comment">// Get an array of all 2D entities</span>
<span class="hljs-keyword">var</span> array_of_entities = Crafty(<span class="hljs-string">"2D"</span>).get();
<span class="hljs-comment">// Convert to an array of ids, rather than entities</span>
<span class="hljs-keyword">var</span> array_of_ids = Crafty(<span class="hljs-string">"2D"</span>).toArray();</code></pre>
	</div>
</div>
			
		</div>
	</div>
	<div class="clearer"></div>
	<div id="footer">
		<div id="contact">
			<a href="https://groups.google.com/forum/#!forum/craftyjs">
				<img src="../images/google.png" />
				google groups</a>
			<a href="mailto:starwed@gmail.com">
				<img src="../images/email.png" />
				starwed@gmail.com</a>
			<a href="https://github.com/craftyjs/Crafty">
				<img src="../images/github.png" />
				github</a>
		</div>
		<ul>
			<li><a href="../">首页</a></li>
				<li><a href="../getting-started/">快速开始</a></li>
				<li><a href="../documentation/">文档</a></li>
				<li><a href="../api/">API</a></li>
				<li><a href="../components/">组件</a></li>
				<li class="emph"><a href="../#install">下载</a></li>
		</ul>
		<p>
			&copy; Crafty 2010-2015. Crafty is distributed under the <a href="http://en.wikipedia.org/wiki/MIT_License">MIT License</a>.
		</p>
	</div>
</div>
</body>
</html>
